<html xmlns:th="http://www.thymeleaf.org" lang="zh">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>flv.js demo</title>
  <style>
    .mainContainer {
      display: block;
      width: 1024px;
      margin-left: auto;
      margin-right: auto;
    }

    .urlInput {
      display: block;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .centeredVideo {
      display: block;
      width: 100%;
      height: 576px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: auto;
    }

    .controls {
      display: block;
      width: 100%;
      text-align: left;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
</head>
<body>
<div class="mainContainer">
  <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
  <!--<button onclick="flv_load()">加载</button>-->
  <button onclick="flv_start()">开始</button>
  <button onclick="flv_pause()">暂停</button>
  <button onclick="flv_destroy()">停止</button>
  <input style="width:100px" type="text" name="seekpoint" />
  <button onclick="flv_seekto()">跳转</button>
</div>
<script type="text/javascript" src="js/flv.min.js"></script>
<script>
  var player = document.getElementById('videoElement');
  if (flvjs.isSupported()) {
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById('videoElement');
      var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive:true, // 如果是直播流需要设置这个值为 true
        url: 'http://localhost:8082/live?port=9999&app=myapp&stream=mystream'
        // ↑ 拉流示例地址，stream参数一定要和推流时所设置的流密钥一致
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    }
  }

  function flv_start() {
    player.play();
  }

  function flv_pause() {
    player.pause();
  }

  function flv_destroy() {
    player.pause();
    player.unload();
    player.detachMediaElement();
    player.destroy();
    player = null;
  }

  function flv_seekto() {
    player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
  }
</script>
</body>

</html>
